Created: 01/05/2018
Last Upadted: 03/06/2021
By: DynamicLayers
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="WowThemez">
<title>Charitify || NGO/Charity/Fundraising Template</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Themify Icons CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Elegant Font Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Slick Nav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- Css Animation CSS -->
<link rel="stylesheet" href="css/css-animation.min.css">
<!-- Nivo Slider CSS -->
<link rel="stylesheet" href="css/nivo-slider.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div><!-- Preloader -->
<header id="header" class="header-section">
</header><!-- /Header Section -->
<div class="header-height"></div>
<section class="slider-section">
</section><!-- /#slider-Section -->
<section class="promo-section bd-bottom">
</section><!-- /Promo Section -->
<section class="causes-section bg-grey bd-bottom padding">
</section><!-- /Causes Section -->
<section class="about-section bd-bottom padding">
</section><!-- /Causes Section -->
<section class="campaigns-section bd-bottom">
</section><!-- /Featured Campaigns Section -->
<section class="team-section bg-grey bd-bottom padding">
</section><!-- /Team Section -->
<section id="counter" class="counter-section">
</section><!-- Counter Section -->
<section class="events-section bg-grey bd-bottom padding">
</section><!-- Events Section -->
<section class="testimonial-section bd-bottom padding">
</section><!-- Testimonial Section -->
<section class="blog-section bg-grey bd-bottom padding">
</section><!-- Blog Section -->
<div class="sponsor-section bd-bottom">
</div><!-- ./Sponsor Section -->
<section class="widget-section padding">
</section><!-- ./Widget Section -->
<footer class="footer-section">
</footer><!-- /Footer Section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Tether JS -->
<script src="js/vendor/tether.min.js"></script>
<!-- Imagesloaded JS -->
<script src="js/vendor/imagesloaded.pkgd.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- isotope JS -->
<script src="js/vendor/jquery.isotope.v3.0.2.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- venobox JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- ajaxchimp JS -->
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<!-- Counterup JS -->
<script src="js/vendor/jquery.counterup.min.js"></script>
<!-- waypoints js -->
<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
<!-- Slick Nav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- Nivo Slider JS -->
<script src="js/vendor/jquery.nivo.slider.pack.js"></script>
<!-- Letter Animation JS -->
<script src="js/vendor/letteranimation.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Contact JS -->
<script src="js/contact.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section"> <div class="top-header"> <div class="container"> <div class="top-content-wrap row"> <div class="col-sm-8"> <ul class="left-info"> <li><a href="#"><i class="ti-email"></i>Info@YourDomain.com</a></li> <li><a href="#"><i class="ti-mobile"></i>+(333) 052 39876</a></li> </ul> </div> <div class="col-sm-4 d-none d-md-block"> <ul class="right-info"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> </div> </div> </div> </div> <div class="bottom-header"> <div class="container"> <div class="bottom-content-wrap row"> <div class="col-sm-4"> <div class="site-branding"> <a href="#"><img src="img/logo.png" alt="Brand"></a> </div> </div> <div class="col-sm-8 text-right"> <ul id="mainmenu" class="nav navbar-nav nav-menu"> <li class="active"> <a href="index.html">Home</a> <ul> <li><a href="index.html">Home Default</a></li> </ul> </li> <li><a href="about.html">About</a></li> <li><a href="causes.html">Causes</a></li> <li><a href="event.html">Event</a></li> <li><a href="#">Pages</a> <ul> <li><a href="gallery.html">Gallery</a></li> </ul> </li> <li><a href="blog-grid.html">Blog</a> <ul> <li><a href="blog-grid.html">Blog Grid</a></li> </ul> </li> <li> <a href="contact.html">Contact</a></li> </ul> <a href="#" class="default-btn">Donet Now</a> </div> </div> </div> </div> </header><!-- /Header Section -->
<section class="slider-section"> <div class="slider-wrapper"> <div id="main-slider" class="nivoSlider"> <img src="img/slider-1.jpg" alt="" title="#slider-caption-1"/> <img src="img/slider-2.jpg" alt="" title="#slider-caption-2"/> <img src="img/slider-3.jpg" alt="" title="#slider-caption-3"/> </div><!-- /#main-slider --> <div id="slider-caption-1" class="nivo-html-caption slider-caption"> <div class="display-table"> <div class="table-cell"> <div class="container"> <div class="slider-text"> <h5 class="wow cssanimation fadeInBottom">Join Us Today</h5> <h1 class="wow cssanimation leFadeInRight sequence">Better Life for People</h1> <p class="wow cssanimation fadeInTop" data-wow-delay="1s">Help today because tomorrow you may be the one who needs helping! <br>Forget what you can get and see what you can give.</p> <a href="#" class="default-btn wow cssanimation fadeInBottom" data-wow-delay="0.8s">Join With Us</a> <a href="#" class="default-btn wow cssanimation fadeInBottom" data-wow-delay="0.8s">Donet Now</a> </div> </div> </div> </div> </div> <!-- /#slider-caption-1 --> </div> </section><!-- /#slider-Section -->
<section class="promo-section bd-bottom"> <div class="promo-wrap"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 xs-padding"> <div class="promo-content"> <img src="img/icon-1.png" alt="prmo icon"> <h3>Make Donetion</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#">Read More</a> </div> </div> </div> </div> </div> </section><!-- /Promo Section -->
<section class="causes-section bg-grey bd-bottom padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>Recent Causes</h2> <span class="heading-border"></span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> It has survived not only five centuries.</p> </div><!-- /Section Heading --> <div class="causes-wrap row"> <div class="col-md-4 xs-padding"> <div class="causes-content"> <div class="causes-thumb"> <img src="img/causes-1.jpg" alt="causes"> <a href="#" class="donate-btn">Donate Now<i class="ti-plus"></i></a> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span>25%</span></div> </div> </div> <div class="causes-details"> <h3>First charity activity of this summer.</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="donation-box"> <p><i class="ti-bar-chart"></i>Goal: $450000</p> <p><i class="ti-thumb-up"></i>Raised: $55000</p> </div> <a href="#" class="read-more">Read More</a> </div> </div> </div><!-- /Causes-1 --> </div> </div> </section><!-- /Causes Section -->
<section class="about-section bd-bottom padding"> <div class="container"> <div class="row"> <div class="col-md-4 xs-padding"> <div class="profile-wrap"> <img class="profile" src="img/profile.jpg" alt="profile"> <h3>Jonathan Smith <span>CEO & Founder of Charitify.</span></h3> <p>Lorem Ipsum is simply dummy printing and industry. It has survived not only five centuries, but also the leap electronic type essentially unchanged.</p> <img src="img/sign.png" alt="sign"> </div> </div> <div class="col-md-8 xs-padding"> <div class="about-wrap row"> <div class="col-md-6 xs-padding"> <img src="img/history.jpg" alt="about-thumb"> <h3>Our History</h3> <p>Lorem Ipsum is simply dummy printing and industry. It has survived not only five centuries, but also the leap electronic type essentially unchanged.</p> <a href="#" class="default-btn">Read More</a> </div> <div class="col-md-6 xs-padding"> <img src="img/mission.jpg" alt="about-thumb"> <h3>Our Mission</h3> <p>Lorem Ipsum is simply dummy printing and industry. It has survived not only five centuries, but also the leap electronic type essentially unchanged.</p> <a href="#" class="default-btn">Read More</a> </div> </div> </div> </div> </div> </section><!-- /Causes Section -->
<section class="campaigns-section bd-bottom"> <div class="container"> <div class="row"> <div class="col-md-6 xs-padding"> <div class="campaigns-wrap"> <h4>Featured Campaigns</h4> <h2>Featured project to built a School.</h2> <p>Lorem Ipsum is simply dummy printing and industry. It has survived not only five centuries, but also the leap electronic type essentially unchanged.</p> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 35%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span>35%</span></div> </div> <div class="donation-box"> <h3><i class="ti-bar-chart"></i>Goal: $450000</h3> <h3><i class="ti-thumb-up"></i>Raised: $55000</h3> </div> <a href="#" class="default-btn">Donate Now</a> </div> </div> <div class="col-md-6 xs-padding"> <div class="video-wrap"> <img src="img/video.jpg" alt="video"> <div class="play"> <a class="img-popup" data-autoplay="true" data-vbtype="video" href="https://www.youtube.com/watch?v=_IlLwfC2dNc"><i class="ti-control-play"></i></a> </div> </div> </div> </div> </div> </section><!-- /Featured Campaigns Section -->
<section class="team-section bg-grey bd-bottom padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>Meet Out Volunteers</h2> <span class="heading-border"></span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> It has survived not only five centuries.</p> </div><!-- /Section Heading --> <div class="team-wrapper row"> <div class="col-lg-6 sm-padding"> <div class="team-wrap row"> <div class="col-md-6"> <div class="team-details"> <img src="img/team-1.jpg" alt="team"> <div class="hover"> <h3>Jonathan Smith <span>Communicator</span></h3> </div> </div> </div><!-- /Team-1 --> </div> </div> <div class="col-lg-6 sm-padding"> <div class="team-content"> <h2>Become a Volunteer?</h2> <h3>Join your hand with us for a better life and beautiful future.</h3> <p>Lorem Ipsum is simply dummy printing and industry. It has survived not only five centuries, but also the leap electronic type essentially unchanged.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <ul class="check-list"> <li><i class="fa fa-check"></i>We are friendly to each other.</li> <li><i class="fa fa-check"></i>If you join with us,We will give you free training.</li> <li><i class="fa fa-check"></i>Its an opportunity to help poor children.</li> <li><i class="fa fa-check"></i>No goal requirements.</li> <li><i class="fa fa-check"></i>Joining is tottaly free. We dont need any money from you.</li> </ul> <a href="#" class="default-btn">Join With Us</a> </div> </div> </div> </div> </section><!-- /Team Section -->
<section id="counter" class="counter-section"> <div class="container"> <ul class="row counters"> <li class="col-md-3 col-sm-6 sm-padding"> <div class="counter-content"> <i class="ti-money"></i> <h3 class="counter">85389</h3> <h4 class="text-white">Money Donated</h4> </div> </li> </ul> </div> </section><!-- Counter Section -->
<section class="events-section bg-grey bd-bottom padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>Upcoming Events</h2> <span class="heading-border"></span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> It has survived not only five centuries.</p> </div><!-- /Section Heading --> <div id="event-carousel" class="events-wrap owlCarousel"> <div class="events-item"> <div class="event-thumb"> <img src="img/events-1.jpg" alt="events"> </div> <div class="event-details"> <h3>Let's talk about the poor children education.</h3> <div class="event-info"> <p><i class="ti-calendar"></i>Started On: 12:00 PM.</p> <p><i class="ti-location-pin"></i>Grand Mahal, Dubai 2100.</p> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.It has survived not only five centuries.</p> <a href="#" class="default-btn">Read More</a> </div> </div><!-- Event-1 --> </div> </div> </section><!-- Events Section -->
<section class="testimonial-section bd-bottom padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>What People Say</h2> <span class="heading-border"></span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> It has survived not only five centuries.</p> </div><!-- /Section Heading --> <div id="testimonial-carousel" class="testimonial-carousel owl-carousel"> <div class="testimonial-item"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <div class="testi-footer"> <img src="img/team-1.jpg" alt="profile"> <h4>Jonathan Smith <span>Marketer</span></h4> </div> </div> </div> </div> </section><!-- Testimonial Section -->
<section class="blog-section bg-grey bd-bottom padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>Recent Stories</h2> <span class="heading-border"></span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> It has survived not only five centuries.</p> </div><!-- /Section Heading --> <div class="row"> <div class="col-lg-12 xs-padding"> <div class="blog-items grid-list row"> <div class="col-md-4 padding-15"> <div class="blog-post"> <img src="img/home-blog-1.jpg" alt="blog post"> <div class="blog-content"> <span class="date"><i class="fa fa-clock-o"></i> January 01.2018</span> <h3><a href="#">Standard gallery post</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="post-meta">Read More</a> </div> </div> </div><!-- Post 1 --> </div> </div><!-- Blog Posts --> </div> </div> </section><!-- Blog Section -->
<div class="sponsor-section bd-bottom"> <div class="container"> <ul id="sponsor-carousel" class="sponsor-items owl-carousel"> <li class="sponsor-item"> <img src="img/sponsor-1.png" alt="sponsor-image"> </li> </ul> </div> </div><!-- ./Sponsor Section -->
<section class="widget-section padding"> <div class="container"> <div class="widget-wrap row"> <div class="col-md-4 xs-padding"> <div class="widget-content"> <img src="img/logo-light.png" alt="logo"> <p>Lorem Ipsum is simply dummy printing and industry. It has survived not only five centuries, but also the leap electronic type essentially unchanged.</p> <ul class="social-icon"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> </div> </div> <div class="col-md-4 xs-padding"> <div class="widget-content"> <h3>Recent Campaigns</h3> <ul class="widget-link"> <li><a href="#">First charity activity of this summer. <span>-1 Year Ago</span></a></li> </ul> </div> </div> <div class="col-md-4 xs-padding"> <div class="widget-content"> <h3>Charitify Location</h3> <ul class="address"> <li><i class="ti-email"></i> Info@YourDomain.com</li> </ul> </div> </div> </div> </div> </section><!-- ./Widget Section -->
<footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-md-6 sm-padding"> <div class="copyright">© 2018 Charitify Powered by WowThemez</div> </div> <div class="col-md-6 sm-padding"> <ul class="footer-social"> <li><a href="#">Orders</a></li> </ul> </div> </div> </div> </footer><!-- /Footer Section -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
jquery.mb.YTPlayer.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
jquery.counterup.min.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
DynamicLayers